<template>
  <div class="nav-menu">
    <div class="logo">
      <img
        class="img"
        src="@/assets/css/yingxiao/logo.png"
        alt="logo"
        width="40"
        height="40"
      />
      <span style="margin-top:10px">新雨池</span>
      <span>总后台管理</span>
      <!-- <span class="title" v-if="!isFold">总后台管理</span> -->
    </div>
    <el-menu
      :default-active="defaultValue" 
      class="el-menu-vertical"
      text-color="#454845"
      active-text-color="#454845"
      :collapse="isFold"
    >
      <!-- <template v-for="item in $store.state.menus"> -->
        <template v-for="item in meunlist">

        <!-- 判断是二级菜单 -->
        <template v-if="item.data && item.data.length > 0">
          <el-submenu :key="item.id" :index="item.id + ''">
            <template slot="title">
              <i v-if="item.menuIcon" :class="item.menuIcon"></i>
              <span slot="title">{{ item.menuName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="itemChildren in item.children"
                :key="itemChildren.id"
                :index="itemChildren.resvalue"
                @click="handlePath(itemChildren.resvalue)"
              >
                {{ itemChildren.resname }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
        <!-- 判断是一级菜单 -->
        <template>
          <el-menu-item
            :key="item.id"
            :index="item.resvalue"
            @click="handlePath
            (item,item.id)"
          >
            <img  v-if="item.val"  class="image" :src="item.resicon" alt="">
            <img  v-else  class="image" :src="item.resicon_on" alt="">
            <span slot="title">{{ item.resname }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu> 
  </div>
</template>

<script>
import { getMenuList } from "@/api/menu";
import { mapMutations,mapState,mapActions } from "vuex"
export default {
  name:'menulist',
  props: {
    isFold: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      key:false,
      defaultValue: "main/getCountData",
    };
  },
  watch: {
    $route(to) {
      this.defaultValue = to.name;
    },
  },
  computed:{
    ...mapState(['meunlist','active'])
  },
  created() {
    console.log(this.active);
    this.defaultValue = this.active
  },
  methods: {
    ...mapActions(['getmenulist']),
    ...mapMutations(['setmenulist','setactive']),
    
    //点击跳转页面
    handlePath(url,key) {
        var newlist = this.meunlist.map(item=>({...item,val:true}))
        newlist.find(item=>item.id==key).val =false
        //存入选中状态
        this.setactive(url.resvalue)
        this.setmenulist(newlist)
      this.$router.push({
        name: url.resvalue,
      })
    }
  }  
};
</script>

<style scoped lang="less">
.nav-menu {
  .logo {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #07A189;
    span {
      font-size: 16px;
        background: #07A189;
        color: #fff;
        font-weight: 900;
      
    }
    // .title {
    //   background: #07A189;
    //   font-size: 16px;
    //   font-weight: 700;
    //   color: #000;
    // }
  }
}
// .el-sub-menu__title {
//   color: #fff !important;
// }
/deep/ .el-menu-item  {
  >span {
    z-index: 999999;
  }
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  line-height: 30px;
  width: 120px;
  background-color:#07A189;
  color: #FFFFFF !important;
}

.el-menu-item.is-active {
  position: relative;
  color: #07A189!important;
  &::after {
    position: absolute;
     right: 0;
     content: '';
     display: inline-block;
     height: 160px;
     width: 100px;
     background: url('~@/assets/css/yingxiao/矩形 12.png') no-repeat;

  }
}
.image {
  z-index:999;
  height: 24px;
  width: 24px;
}

 
</style>